import { Tabs,Grid,Button,Tag } from 'antd-mobile'
import React, { useRef, useState } from 'react'
//商户的主页面
import "@/css/vender/homeIndex.css"
const VHome = () => {
    const [num,setNum]=useState(0);
    return <div className='VHomeIndex'>
          <div className='head-nav'>
          <Tabs className='nav-tabs' activeLineMode="fixed">
          <Tabs.Tab title='昨日数据' key='fruits'>
            菠萝
          </Tabs.Tab>
          <Tabs.Tab title='今日数据' key='vegetables'>
            <div className="todayData">
                <div>
                    0订单
                </div>
                <div>
                    ￥0 营业额
                </div>
            </div>

          </Tabs.Tab>
          <Tabs.Tab title='本周数据' key='animals'>
            蚂蚁
          </Tabs.Tab>
        </Tabs>
          </div>



          <div className='shop'> 
          <div className="shopList">
          <Grid columns={2} gap={4}>
          
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <Tag style={{float:"right"}} color='success'>上架中</Tag>
                  <img src={require(`@/assets/imgs/shop${2}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-weight'>950g | +50g</p>
                    <p className='shop-explain'><Tag color='#b2b2b2' fill='outline'>生产日期:2024-01-25</Tag></p>
                   
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'><Tag color='primary'>库存:96</Tag></p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                   
                  </div>
                </div>
              </div>
            </Grid.Item>

            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>

                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>

            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>


            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>

            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>

            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>  <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>
            <Grid.Item>
            <div className="shop-item">
                <div className='shop'>
                  <img src={require(`@/assets/imgs/shop${3}.jpg`)} alt='' className='shop-img' />
                  <div className='shop-detail'>
                    <p className='shop-name'>雪山神牛</p>
                    <p className='shop-explain'>2斤 | ±0.5斤 | 正宗雪山神牛</p>
                    <div className='deposits'>
                      <Tag color='warning' >
                        销量:4
                      </Tag>
                      <p className='inventory'>库存:96</p>
                    </div>
                    <div className='shop-price'>
                       <span></span><span>￥3.99</span>
                    </div>
                    {/* <div className='shop-btn'>
                      <Button shape='rounded' color='danger' size='mini'>立即加购</Button>
                    </div> */}
                  </div>
                </div>
              </div>
            </Grid.Item>
            
          </Grid>
        </div> 
       
          </div>
    </div>
}

export default VHome